<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${entity.name} + ' - Knowledge Graph'"></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
    <h1 th:text="${entity.name}"></h1>
    <p><strong>Type:</strong> <span th:text="${entity.type}"></span></p>
    <p><strong>Description:</strong> <span th:text="${entity.description}"></span></p>

    <h3 class="mt-4">Relations</h3>
    <ul class="list-group">
        <li class="list-group-item" th:each="relation : ${entity.relations}">
            <strong th:text="${relation.type}"></strong>:
            <a th:href="@{/knowledge-graph/entity/{name}(name=${relation.targetEntity.name})}"
               th:text="${relation.targetEntity.name}"></a>
            <span th:if="${relation.description}" th:text="'(' + ${relation.description} + ')'"></span>
        </li>
    </ul>

    <div class="mt-3">
        <a th:href="@{/knowledge-graph/entity/{name}/add-relation(name=${entity.name})}"
           class="btn btn-primary">Add New Relation</a>
        <a href="/knowledge-graph/entities" class="btn btn-secondary">Back to List</a>
    </div>
</div>
</body>
</html>